import {useEffect, useState} from "react";
import {Breadcrumb, message, Menu} from "antd"
import {CalendarOutlined, ReadOutlined, SendOutlined, SolutionOutlined, SoundOutlined} from "@ant-design/icons"
import type {MenuProps} from "antd";

import {Link, Outlet, useNavigate, useParams} from "react-router-dom";
import {fetchHospitalDepartmentAPI, fetchHospitalRegistrationAPI} from "@/api/hospitalAPI/registrationAPI";
import {DepartmentItem, RegistrationType} from "@/type/registrationType";
import "./Hospital.scss"

const Hospital = () => {
    // 路由跳转
    const navigate = useNavigate();

    // 路由传递过来的params参数 医院的编码
    const {hoscode} = useParams()


    /*    const [registration, setRegistration] = useState<RegistrationType>()
        const [departmentList, setDepartmentList] = useState<DepartmentItem[]>()*/

    // 侧边菜单栏
    const menuItems: Required<MenuProps>['items'][number][] = [
        {
            key: '/hospital/registration',
            label: '预约挂号',
            icon: <CalendarOutlined/>
        },
        {
            key: '/hospital/detail',
            label: '医院详情',
            icon: <ReadOutlined/>
        },

        {
            key: '/hospital/notice',
            label: '预约须知',
            icon: <SendOutlined/>
        },
        {
            key: '/hospital/suspend',
            label: '停诊信息',
            icon: <SolutionOutlined/>
        },
        {
            key: '/hospital/query',
            label: '查询/取消',
            icon: <SoundOutlined/>
        },

    ];

    // 当前的路由地址
    const [defaultSelectKey, setDefaultSelectKey] = useState<string>('/hospital/registration')

    /**
     *
     * @description点击左侧菜单栏的回调函数
     *
     * */
    const onClick: MenuProps['onClick'] = (e) => {
        setDefaultSelectKey(`${e.key}/${hoscode}`)
        navigate(`${e.key}/${hoscode}`)
    };


    /**
     * @description 获取医院挂号详情的接口
     *
     const fetchHospitalRegistration = async (): Promise<void> => {
     try {
     const {data} = await fetchHospitalRegistrationAPI(hoscode as string)
     setRegistration(data)
     } catch (error: any) {
     message.error(error.message)
     }
     }*/
    /**
     * @description 获取医院科室列表的接口
     *
     const fetchHospitalDepartment = async (): Promise<void> => {
     try {
     const {data} = await fetchHospitalDepartmentAPI(hoscode as string)
     setDepartmentList(data)
     } catch (error: any) {
     message.error(error.message)
     }
     } */


    useEffect(() => {
        /*        fetchHospitalRegistration()
                fetchHospitalDepartment()*/
    }, []);

    return (
        <div className="registration">
            <div className="container">

                <div className="breadcrumb">
                    <Breadcrumb items={[{title: "医院信息"}]}></Breadcrumb>
                </div>

                <div className="main">
                    <div className="menu">
                        <Menu onClick={onClick} style={{width: 200}} mode="inline" defaultSelectedKeys={[defaultSelectKey]} items={menuItems}/>
                    </div>
                    <div className="outlet">
                        <Outlet></Outlet>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Hospital
